<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2.2CSS3画三角形和对话框</title>
    <style>
.dialog{
    background-color: #6A6;
    margin: 50px auto;
    width:300px;
    height: 25px;
    line-height: 25px;
    padding: 10px;
    border-radius: 6px;
    color:#fff;
    position: relative;
}
.dialog::before{
    content: '';
    border-left: 0px solid  #6A6;
    border-top:10px solid transparent;
    border-bottom:10px solid transparent;
    border-right:10px solid #6A6;
    position: absolute;
    left: -10px;
    top:14px;
}
    </style>
</head>
<body>
  <div class="dialog">
        hello everyone i am pandan!
  </div>
</body>
</html>